import React from 'react'
import { Menu, Icon } from 'antd';
import MenuConfig from './../../config/menuConfig';
import './index.less'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;


export default class NavLeft extends React.Component{
    componentWillMount() {
        const menuTreeNode = this.renderMenu(MenuConfig);
        console.log(menuTreeNode);
        this.setState({
            menuTreeNode
        })
    }
    // 菜单渲染 / 递归
    renderMenu=(data) => {
        return data.map((item)=>{
            if (item.children){
                return (
                    <SubMenu key={item.key} title={item.title}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item key={item.key}>{item.title}</Menu.Item>
        })
    }

    render() {
        return (
            <div>
                <div className="logo">
                    <img src="/assets/logo.svg" alt=""/>
                    <h1>小钱</h1>
                </div>
                <Menu theme={"dark"}>
                    { this.state.menuTreeNode }

                </Menu>
            </div>
        )
    }


}
